<template>
  <div class="stock-in-manager">
        <!-- 页面标题区域 -->
    <div class="page-header">
      <h2>入库管理</h2>
      <el-tag type="info">共 {{ total }} 条记录</el-tag>
    </div>
    <!-- 统计卡片区 -->
    <div class="statistics-cards">
      <el-row :gutter="20">
        <el-col :span="5">
          <el-card shadow="hover" class="stat-card">
            <div class="stat-content">
              <div class="stat-left">
                <div class="stat-icon"><i class="el-icon-s-order"></i></div>
                <div class="stat-title">入库单数</div>
              </div>
              <div class="stat-value">{{ statistics.totalCount }}</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="5">
          <el-card shadow="hover" class="stat-card">
            <div class="stat-content">
              <div class="stat-left">
                <div class="stat-icon"><i class="el-icon-s-goods"></i></div>
                <div class="stat-title">入库总数量</div>
              </div>
              <div class="stat-value">{{ statistics.totalQuantity }}</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="5">
          <el-card shadow="hover" class="stat-card">
            <div class="stat-content">
              <div class="stat-left">
                <div class="stat-icon"><i class="el-icon-money"></i></div>
                <div class="stat-title">入库总金额</div>
              </div>
              <div class="stat-value">¥{{ statistics.totalAmount ? Number(statistics.totalAmount).toFixed(2) : '0.00' }}</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="5">
          <el-card shadow="hover" class="stat-card">
            <div class="stat-content">
              <div class="stat-left">
                <div class="stat-icon"><i class="el-icon-circle-close"></i></div>
                <div class="stat-title">作废单数</div>
              </div>
              <div class="stat-value">{{ statistics.invalidCount }}</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card shadow="hover" class="stat-card">
            <div class="stat-content">
              <div class="stat-left">
                <div class="stat-icon"><i class="el-icon-date"></i></div>
                <div class="stat-title">最新入库时间</div>
              </div>
              <div class="stat-value">{{ statistics.latestDate ? formatTime(statistics.latestDate) : '-' }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>


    <!-- 搜索和操作区域 -->
    <el-card class="operation-area" shadow="hover">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="商品">
          <el-select v-model="searchForm.productId" placeholder="请选择商品" clearable filterable>
            <el-option v-for="item in products" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="供应商">
          <el-input v-model="searchForm.supplier" placeholder="请输入供应商" clearable></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <el-option label="正常" :value="1"></el-option>
            <el-option label="作废" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="medium" plain type="primary" @click="handleSearch">查询</el-button>
          <el-button size="medium" plain @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="operation-buttons">
        <el-button plain size="medium" type="primary" icon="el-icon-plus" class="add-button" @click="showCreateDialog">新增入库</el-button>
        <el-button plain size="medium" icon="el-icon-refresh" @click="getList">刷新</el-button>
      </div>
    </el-card>

    <!-- 入库列表 -->
    <el-card class="table-card" shadow="hover">
      <el-table :data="stockInList" border style="width: 100%" :default-sort="{prop: 'id', order: 'ascending'}">
        <el-table-column prop="id" label="入库单号" width="120" sortable></el-table-column>
        <el-table-column label="商品信息" min-width="200">
          <template slot-scope="scope">
            <div class="product-info">
              <el-image :src="'api'+scope.row.product?.imageUrl" :preview-src-list="['api'+scope.row.product?.imageUrl]"
                fit="cover" style="width: 50px; height: 50px">
              </el-image>
              <div class="product-detail">
                <div class="product-name">{{ scope.row.product?.name }}</div>
                <div class="product-price">
                  单价：¥{{ scope.row.unitPrice?.toFixed(2) }}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="quantity" label="入库数量" width="120"></el-table-column>
        <el-table-column prop="totalPrice" label="总金额" width="120">
          <template slot-scope="scope">
            ¥{{ scope.row.totalPrice?.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="supplier" label="供应商" width="150"></el-table-column>
        <el-table-column prop="operator.name" label="操作人" width="120"></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'info'">
              {{ scope.row.status === 1 ? '正常' : '作废' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="stockDate" label="入库日期" width="180">
          <template slot-scope="scope">
            {{ formatTime(scope.row.stockDate) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="small" icon="el-icon-edit" v-if="scope.row.status === 1" @click="handleInvalidate(scope.row)">
              作废
            </el-button>
            <el-button type="text" size="small" icon="el-icon-view" @click="handleDetail(scope.row)">详情</el-button>
            <el-button type="text" size="small" icon="el-icon-delete" class="delete-btn" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.currentPage" :limit.sync="queryParams.size"
        @pagination="getList" />
    </el-card>

    <!-- 新增入库对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="createDialogVisible" width="500px">
      <el-form :model="createForm" :rules="createRules" ref="createForm" label-width="100px">
        <el-form-item label="商品" prop="productId">
          <el-select v-model="createForm.productId" placeholder="请选择商品" filterable style="width: 100%">
            <el-option v-for="item in products" :key="item.id" :label="item.name" :value="item.id">
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">库存: {{ item.stock }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入库数量" prop="quantity">
          <el-input-number v-model="createForm.quantity" :min="1" :max="99999" style="width: 100%"></el-input-number>
        </el-form-item>
        <el-form-item label="单价" prop="unitPrice">
          <el-input v-model.number="createForm.unitPrice" type="number" placeholder="请输入单价">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="供应商" prop="supplier">
          <el-input v-model="createForm.supplier" placeholder="请输入供应商"></el-input>
        </el-form-item>
        <el-form-item label="入库日期" prop="stockDate">
          <el-date-picker
            v-model="createForm.stockDate"
            type="date"
            placeholder="选择入库日期"
            value-format="yyyy-MM-dd"
            style="width: 100%">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="createForm.remark" :rows="3" placeholder="请输入备注信息"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="createDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitCreate">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 详情对话框 -->
    <el-dialog title="入库详情" :visible.sync="detailDialogVisible" width="600px">
      <div class="stock-detail" v-if="currentStock">
        <div class="detail-section">
          <h4>基本信息</h4>
          <div class="detail-item">
            <span class="label">入库单号：</span>
            <span>{{ currentStock.id }}</span>
          </div>
          <div class="detail-item">
            <span class="label">入库状态：</span>
            <el-tag :type="currentStock.status === 1 ? 'success' : 'info'">
              {{ currentStock.status === 1 ? '正常' : '作废' }}
            </el-tag>
          </div>
          <div class="detail-item">
            <span class="label">入库时间：</span>
            <span>{{ formatTime(currentStock.createdAt) }}</span>
          </div>
          <div class="detail-item">
            <span class="label">入库日期：</span>
            <span>{{ formatTime(currentStock.stockDate) }}</span>
          </div>
        </div>

        <div class="detail-section">
          <h4>商品信息</h4>
          <div class="detail-item">
            <span class="label">商品名称：</span>
            <span>{{ currentStock.product?.name }}</span>
          </div>
          <div class="detail-item">
            <span class="label">入库数量：</span>
            <span>{{ currentStock.quantity }}</span>
          </div>
          <div class="detail-item">
            <span class="label">单价：</span>
            <span>¥{{ currentStock.unitPrice?.toFixed(2) }}</span>
          </div>
          <div class="detail-item">
            <span class="label">总金额：</span>
            <span class="total-price">¥{{ currentStock.totalPrice?.toFixed(2) }}</span>
          </div>
        </div>

        <div class="detail-section">
          <h4>其他信息</h4>
          <div class="detail-item">
            <span class="label">供应商：</span>
            <span>{{ currentStock.supplier }}</span>
          </div>
          <div class="detail-item">
            <span class="label">操作人：</span>
            <span>{{ currentStock.operator?.name }}</span>
          </div>
          <div class="detail-item">
            <span class="label">备注：</span>
            <span>{{ currentStock.remark || '无' }}</span>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 添加删除确认对话框 -->
    <el-dialog
      title="删除确认"
      :visible.sync="deleteDialogVisible"
      width="30%">
      <span>确定要删除该入库记录吗？删除后将无法恢复。</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="confirmDelete">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Request from '@/utils/request'
import Pagination from '@/components/Pagination/index.vue'
import { formatTime } from '@/utils/time'

export default {
  name: 'StockInManager',
  inject: ['userInfo'],
  components: {
    Pagination
  },
  data() {
    return {
      // 搜索表单
      searchForm: {
        productId: undefined,
        supplier: undefined,
        status: undefined
      },
      // 查询参数
      queryParams: {
        currentPage: 1,
        size: 10
      },
      // 入库列表
      stockInList: [],
      // 总数
      total: 0,
      // 商品列表
      products: [],
      // 新增对话框
      createDialogVisible: false,
      createForm: {
        productId: undefined,
        quantity: 1,
        operatorId: this.userInfo.id,
        unitPrice: undefined,
        supplier: '',
        remark: '',
        stockDate: new Date().toISOString().split('T')[0]
      },
      createRules: {
        productId: [{ required: true, message: '请选择商品', trigger: 'change' }],
        quantity: [{ required: true, message: '请输入入库数量', trigger: 'blur' }],
        unitPrice: [
          { required: true, message: '请输入单价', trigger: 'blur' },
          { type: 'number', min: 0.01, message: '单价必须大于0', trigger: 'blur' }
        ],
        supplier: [{ required: true, message: '请输入供应商', trigger: 'blur' }],
        stockDate: [{ required: true, message: '请选择入库日期', trigger: 'change' }]
      },
      // 详情对话框
      detailDialogVisible: false,
      currentStock: null,
      // 删除对话框
      deleteDialogVisible: false,
      currentDeleteStock: null,
      // 统计数据
      statistics: {
        totalCount: 0,
        totalQuantity: 0,
        totalAmount: 0,
        invalidCount: 0,
        latestDate: null
      },
      statsLoading: false,
    }
  },
  computed: {
    dialogTitle() {
      return '新增入库'
    }
  },
  created() {
    this.getProducts()
    this.getList()
    this.getStatistics()
  },
  methods: {
    // 获取商品列表
    async getProducts() {
      try {
        const merchantId = this.userInfo.role === 'MERCHANT' ? this.userInfo.id : undefined
        const res = await Request.get('/product/all', { params: { merchantId } })
        if (res.code === '0') {
          this.products = res.data
        }
      } catch (error) {
        console.error('获取商品列表失败:', error)
      }
    },
    // 获取入库列表
    async getList() {
      try {
        const operatorId = this.userInfo.role === 'MERCHANT' ? this.userInfo.id : undefined
        const params = {
          ...this.queryParams,
          ...this.searchForm,
          operatorId
        }

        const res = await Request.get('/stock/in/list', { params })
        if (res.code === '0') {
          this.stockInList = res.data.records
          this.total = res.data.total
        }
        // 新增：每次获取列表后刷新统计
        this.getStatistics()
      } catch (error) {
        console.error('获取入库列表失败:', error)
      }
    },
    // 搜索
    handleSearch() {
      this.queryParams.currentPage = 1
      this.getList()
    },
    // 重置搜索
    resetSearch() {
      this.searchForm = {
        productId: undefined,
        supplier: undefined,
        status: undefined
      }
      this.handleSearch()
    },
    // 显示新增对话框
    showCreateDialog() {
      this.createForm = {
        productId: undefined,
        quantity: 1,
        unitPrice: undefined,
        supplier: '',
        remark: '',
        stockDate: new Date().toISOString().split('T')[0]
      }
      this.createDialogVisible = true
    },
    // 提交新增
    async submitCreate() {
      try {
        await this.$refs.createForm.validate()
        const res = await Request.post('/stock/in', {
          ...this.createForm,
          operatorId: this.userInfo.id
        })
        if (res.code === '0') {
          this.$message.success('入库成功')
          this.createDialogVisible = false
          this.getList()
          this.getStatistics()
        }
      } catch (error) {
        console.error('入库失败:', error)
      }
    },
    // 作废
    async handleInvalidate(row) {
      try {
        await this.$confirm('确认要作废该入库记录吗？', '提示', {
          type: 'warning'
        })
        const res = await Request.put(`/stock/in/${row.id}/invalidate`)
        if (res.code === '0') {
          this.$message.success('作废成功')
          this.getList()
          this.getStatistics()
        }
      } catch (error) {
        console.error('作废失败:', error)
      }
    },
    // 查看详情
    handleDetail(row) {
      this.currentStock = row
      this.detailDialogVisible = true
    },
    // 删除
    handleDelete(row) {
      this.currentDeleteStock = row
      this.deleteDialogVisible = true
    },
    // 确认删除
    async confirmDelete() {
      try {
        const res = await Request.delete(`/stock/in/${this.currentDeleteStock.id}`)
        if (res.code === '0') {
          this.$message.success('删除成功')
          this.deleteDialogVisible = false
          this.getList()
          this.getProducts()
          this.getStatistics()
        }
      } catch (error) {
        console.error('删除失败:', error)
        this.$message.error(error.response?.data?.msg || '删除失败')
      }
    },
    // 获取统计数据
    async getStatistics() {
      this.statsLoading = true
      try {
        const operatorId = this.userInfo.role === 'MERCHANT' ? this.userInfo.id : undefined
        const res = await Request.get('/stock/in/statistics', { params: { operatorId } })
        if (res.code === '0') {
          this.statistics = res.data
        }
      } catch (error) {
        this.$message.error('获取统计数据失败')
      } finally {
        this.statsLoading = false
      }
    },
    formatTime
  }
}
</script>

<style scoped>
.stock-in-manager {
  padding: 24px;
  background-color: #fff8f0;
  min-height: calc(100vh - 60px);
}

.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.page-header h2 {
  font-size: 24px;
  font-weight: 500;
  color: #E67E22;
  margin: 0;
  margin-right: 15px;
}

.statistics-cards {
  margin-bottom: 24px;
  position: relative;
}

.stat-card {
  border-radius: 12px;
  transition: all 0.3s;
  border: none;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.stat-card:hover {
  box-shadow: 0 6px 20px rgba(243, 156, 18, 0.1);
  transform: none;
}

.stat-content {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to right, #fff, #fff8e6);
  position: relative;
  overflow: hidden;
}

.stat-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, #F39C12, rgba(243, 156, 18, 0.5));
}

.stat-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.stat-icon {
  font-size: 26px;
  color: #F39C12;
  opacity: 0.8;
  text-align: center;
  background-color: rgba(243, 156, 18, 0.1);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.stat-title {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #E67E22;
  margin-right: 16px;
}

.operation-area {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  margin-bottom: 10px;
}

.table-card {
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.operation-buttons {
  margin-top: 8px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px dashed #f5e8d3;
}

.operation-buttons .add-button {
  background: linear-gradient(135deg, #F39C12, #F9CA24);
  color: white;
  border: none;
  transition: all 0.3s;
}

.operation-buttons .add-button:hover {
  transform: none;
  box-shadow: none;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* 美化表格 */
:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: none;
}

:deep(.el-table th) {
  background-color: #fff4e0;
  font-weight: 500;
  color: #E67E22;
  padding: 14px 0;
}

:deep(.el-table td) {
  padding: 14px 0;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background-color: #fffbf5;
}

.product-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.product-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-name {
  font-size: 14px;
  color: #E67E22;
}

.product-price {
  font-size: 13px;
  color: #909399;
}

/* 美化对话框 */
:deep(.el-dialog) {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

:deep(.el-dialog__header) {
  padding: 24px;
  border-bottom: 1px solid #f5e8d3;
  margin: 0;
  background: #fff4e0;
}

:deep(.el-dialog__title) {
  font-size: 20px;
  font-weight: 500;
  color: #E67E22;
}

:deep(.el-dialog__body) {
  padding: 32px 24px;
}

:deep(.el-dialog__footer) {
  padding: 16px 24px;
  border-top: 1px solid #f5e8d3;
  background: #faf7f0;
}

/* 美化表单 */
:deep(.el-form-item__label) {
  font-weight: 500;
  color: #E67E22;
}

:deep(.el-input__inner) {
  border-radius: 8px;
  border: 1px solid #f0d5b3;
  transition: all 0.3s;
  padding: 0 15px;
  height: 40px;
  line-height: 40px;
}

:deep(.el-input__inner:focus) {
  border-color: #F39C12;
  box-shadow: 0 0 0 2px rgba(243, 156, 18, 0.2);
}

:deep(.el-select .el-input__inner:focus) {
  border-color: #F39C12;
}

:deep(.el-button--primary) {
  background-color: #F39C12;
  border-color: #F39C12;
  color: #fff;
}

:deep(.el-button--primary:hover) {
  background-color: #E67E22;
  border-color: #E67E22;
  color: #fff;
}

:deep(.el-button--text) {
  color: #F39C12;
}

.delete-btn {
  color: #f56c6c;
  margin-left: 12px;
}

.delete-btn:hover {
  color: #ff4949;
}

:deep(.el-switch.is-checked .el-switch__core) {
  border-color: #F39C12;
  background-color: #F39C12;
}

.detail-section {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f5e8d3;
}

.detail-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.detail-section h4 {
  font-size: 16px;
  color: #E67E22;
  margin: 0 0 16px 0;
  font-weight: 500;
}

.detail-item {
  display: flex;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.4;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.detail-item .label {
  width: 100px;
  color: #909399;
}

.total-price {
  color: #f56c6c;
  font-weight: 500;
}

/* 分页样式 */
:deep(.el-pagination) {
  padding: 20px 0;
  text-align: right;
}

:deep(.el-pagination button) {
  background: none;
}

:deep(.el-pagination .btn-next),
:deep(.el-pagination .btn-prev) {
  border: 1px solid #f0d5b3;
  border-radius: 8px;
}

:deep(.el-pager li) {
  border-radius: 8px;
  margin: 0 3px;
}

:deep(.el-pager li.active) {
  background-color: #F39C12;
  color: #fff;
}

:deep(.el-tag--info) {
  background-color: rgba(243, 156, 18, 0.1);
  border-color: rgba(243, 156, 18, 0.2);
  color: #F39C12;
}

:deep(.el-button) {
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.3s;
}

:deep(.el-button:hover) {
  transform: none;
  box-shadow: none;
}
</style>